﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>图片预览</title>
    <script src="~/Content/jquery/jquery.min.js"></script>
    <style>
        html,body
        {
            overflow: hidden;
        }
        div {
            height: 100%;
            width: 100%;
            top: 0;
            z-index: -1;
            position: absolute;
            overflow: hidden;
        }

            div img {
                position: absolute;
                width: 98%;
                cursor: move;
            }
    </style>
</head>
<body>
    <input type="hidden" id="fileId" value="@ViewBag.fileId" />
    <div id="div" onmousewheel="return bbimg(this)"><img id="img" /></div>
    <script language="javascript">
        $(function () {
            var fileId = $("#fileId").val();
            $("#img").attr("src", "/LR_SystemModule/Annexes/PreviewFile?fileId=" + fileId);
        })
        var params = {
            zoomVal: 1,
            left: 0,
            top: 0,
            currentX: 0,
            currentY: 0,
            flag: false
        };
        //图片缩放
        function bbimg(o) {
            var o = o.getElementsByTagName("img")[0];
            params.zoomVal += event.wheelDelta / 1200;
            if (params.zoomVal >= 0.2) {
                o.style.transform = "scale(" + params.zoomVal + ")";
            } else {
                params.zoomVal = 0.2;
                o.style.transform = "scale(" + params.zoomVal + ")";
                return false;
            }
        }
        //获取相关CSS属性
        var getCss = function (o, key) {
            return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
        };
        //拖拽的实现
        var startDrag = function (bar, target, callback) {
            if (getCss(target, "left") !== "auto") {
                params.left = getCss(target, "left");
            }
            if (getCss(target, "top") !== "auto") {
                params.top = getCss(target, "top");
            }
            //o是移动对象
            bar.onmousedown = function (event) {
                params.flag = true;
                if (!event) {
                    event = window.event;
                    //防止IE文字选中
                    bar.onselectstart = function () {
                        return false;
                    }
                }
                var e = event;
                params.currentX = e.clientX;
                params.currentY = e.clientY;
            };
            document.onmouseup = function () {
                params.flag = false;
                if (getCss(target, "left") !== "auto") {
                    params.left = getCss(target, "left");
                }
                if (getCss(target, "top") !== "auto") {
                    params.top = getCss(target, "top");
                }
            };
            document.onmousemove = function (event) {
                var e = event ? event : window.event;
                if (params.flag) {
                    var nowX = e.clientX, nowY = e.clientY;
                    var disX = nowX - params.currentX, disY = nowY - params.currentY;
                    target.style.left = parseInt(params.left) + disX + "px";
                    target.style.top = parseInt(params.top) + disY + "px";
                    if (typeof callback == "function") {
                        callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                    }
                    if (event.preventDefault) {
                        event.preventDefault();
                    }
                    return false;
                }
            }
        };
        startDrag(document.getElementById("img"), document.getElementById("img"))

        function AutoSize(Img, maxWidth, maxHeight) {
            var image = new Image();
            //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）
            image.src = Img.src;
            // 当图片比图片框小时不做任何改变
            if (image.width < maxWidth && image.height < maxHeight) {
                Img.width = image.width;
                Img.height = image.height;
            }
            else //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放
            {
                if (maxWidth / maxHeight <= image.width / image.height) //原图片宽高比例 大于 图片框宽高比例
                {
                    Img.width = maxWidth;   //以框的宽度为标准
                    Img.height = maxWidth * (image.height / image.width);
                }
                else {   //原图片宽高比例 小于 图片框宽高比例
                    Img.width = maxHeight * (image.width / image.height);
                    Img.height = maxHeight;   //以框的高度为标准
                }
            }

        }

    </script>
</body>
</html>
